import React from 'react';
import tools from '../../common/tools';

const orders=[
    {name:'正序',value:'asc'},
    {name:'倒序',value:'desc'}
];

class DBdata extends React.Component {
    constructor(props){
        super();
        this.control=null;
        this.state={
            tables:[],
            data_table:'',
            data_start:0,
            data_size:60,
            data_order:'asc'
        };

        this.btns=[
            {name:'取消', evt:'cancel'},
            {name:'导入数据', evt:'ok'}
        ];
        if(props.control!=undefined){
            this.initControl(props.control);
        }
        this.handleClick = this.handleClick.bind(this);
        this.handleChange = this.handleChange.bind(this);
    }
    initControl(hooks){
        let that=this;
        this.control=hooks;
        this.control.addHook('show',function(data){
            that.getRemoteData();
            let params=data.params;
            if(params!=undefined){
                that.setState(params.state);
            }
            $('#g_dbdatabox').modal('show');
        });
        this.control.addHook('hide',function(){
            $('#g_dbdatabox').modal('hide');
        });
    }
    componentDidMount(){
        this.getRemoteData();
    }
    getRemoteData(){
        let that=this;
        $.getJSON(this.props.source+'&t='+new Date().getTime(), function(result) {
            let tables=[];
            if(result.error===null){
                result.data.forEach(e=>{
                    tables.push({name:e.tableDesc,value:e.tableName});
                });
            }
            that.setState({tables:tables});
        });
    }
    render(){
        let that=this;
        return (
            <div id="g_dbdatabox" className="modal fade" style={{display:"none"}} >
                <div className="modal-dialog">
                    <div className="modal-content">
                    <div className="modal-header">
                        <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 className="modal-title">数据源选择</h4>
                    </div>
                    <div className="modal-body">
                        <form className="form-horizontal">
                            <div className="form-group">
                                <label for="data_table" className="col-sm-2 control-label">选择数据表</label>
                                <div className="col-sm-10">
                                    <select className="form-control" id="data_table" value={that.state.data_table} onChange={this.handleChange}>
                                        {
                                            this.state.tables.map(e=>{
                                                return <option key={e.value} value={e.value}>{e.name}</option>
                                            })
                                        }
                                    </select>
                                </div>
                            </div>
                            <div className="form-group">
                                <label for="data_start" className="col-sm-2 control-label">开始位置</label>
                                <div className="col-sm-10">
                                <input type="number" className="form-control" id="data_start" placeholder="请输入查询的起始位置，如：0" value={this.state.data_start} onChange={this.handleChange}/>
                                </div>
                            </div>
                            <div className="form-group">
                                <label for="data_size" className="col-sm-2 control-label">数据大小</label>
                                <div className="col-sm-10">
                                <input type="text" className="form-control" id="data_size" placeholder="请输入每次查询的条数，如：60" value={this.state.data_size} onChange={this.handleChange}/>
                                </div>
                            </div>
                            <div className="form-group">
                                <label for="data_order" className="col-sm-2 control-label">排序方式</label>
                                <div className="col-sm-10">
                                    <select className="form-control" id="data_order" value={that.state.data_order} onChange={this.handleChange}>
                                        {
                                            orders.map(e=>{
                                                return <option key={e.value} value={e.value}>{e.name}</option>
                                            })
                                        }
                                    </select>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div className="modal-footer">
                        {
                            this.btns.map(e=>{
                                let cls=tools.getBtnCls(e.evt);
                                return <button type="button" className={cls} key={e.evt} data-evt={e.evt} onClick={that.handleClick} >{e.name}</button>
                            })
                        }
                    </div>
                    </div>
                </div>
            </div>
        );
    }
    handleClick(e){
        let that=this;
        let evt=e.target.getAttribute('data-evt');
        if(this.control!==null){
            this.control.dispatch('callback',{
                evt:evt,
                data:evt==='cancel'?null:{
                    table:this.state.data_table,
                    start:this.state.data_start,
                    size:this.state.data_size,
                    order:this.state.data_order
                }
            });
        }
        that.control.dispatch('hide');
    }
    handleChange(e){
        let that=this;
        let key=e.target.getAttribute('id');
        let filed={};
        filed[key]=e.target.value;
        this.setState(filed);
    }
}

export default DBdata;